<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="shiro"  uri="http://shiro.apache.org/tags" %>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>账户充值</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
  </head>
  <style>
    .col-md-2{
      padding: 0;
    }

    .companyname{
      height: 35px;
      font-size: 15px;
      line-height: 35px;
      padding-left: 10px;
      border-bottom: #f6f6f6 1px solid;
    }
    .nocompany,.yescompany{
      /*border: 1px solid #ddd;*/
      margin-bottom: 10px;
    }
    .modular{
      font-size: 25px;
      /*font-weight: bold;*/
      color: white;
    }
    .able-outer-container,.able-select-area {
      width: 370px;
      height: 100px;
    }
    .able-outer-container {
      overflow: hidden;
    }
    .able-inner-container {
      overflow-x: hidden;
      overflow-y: scroll;
    }

    .able-inner-container::-webkit-scrollbar {
      display: none;
    }
    .mod-1{
      position: relative;
      top: 5px;
      left: 20px;
      border: 1px solid #ddd;
      width: 16%;
      height: 700px;
      float: left;
    }
    .page-footer{
      background-color: #3c8dbc !important;
    }
    .rec{
      min-height: 450px;
      border: 1px solid #ddd;
      float: left;
      border-radius: 10px !important;
      background-color: #f6f6f6;
    }
    .user{
      width: 100%;
      height: 28px;
      line-height: 28px;
      font-size: 15px;
    }
    .success{
      text-align: center;
      font-size: 25px;
      line-height: 80px;
      color: green;
    }
    .on{
      background-color: #f5f5f5;
    }
    .merchant-Msg{
      position: relative;
      top: 5px;
    }
    .able-a-merchant{
      position: relative;
      margin-top: 5px;
      color: #2488CC;
    }
  </style>
  <body>
  <div class="page">
      <!-- Main Navbar-->
      <jsp:include page="header.jsp"></jsp:include>
      <div class="page-content d-flex align-items-stretch">
          <!-- Side Navbar -->
          <jsp:include page="left.jsp"></jsp:include>
      <div class="content-inner" style="background-color: white">
        <!-- Page Header-->
        <header class="page-header">
          <div class="container-fluid">
            <h2 class="no-margin-bottom">账户充值</h2>
          </div>
        </header>
        <div class="content-box" >

          <div class="mod-1">
            <div  class="able-outer-container">
              <div class="able-inner-container">
                <div class="able-select-area"  >
                  <div id="able-merchant" style="position: relative;left: 10%; font-size: 15px;">

                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-10 re" style="display:block; background-color: white;width: 81%;margin-left: 2.3333%;border: 1px solid #ddd;padding: 0;    position: absolute;left: 16%;top: 66px;min-height: 700px">
            <div class="portlet light" style="position: absolute;width: 100%">
              <div class="portlet-title">
                <div class="caption"><span class="caption-subject theme-font bold uppercase"></span>
                </div>
              </div>
              <input  class="hidden" id="merchant_id" name="id" value="">
              <div class="portlet-body">
                <div>
                  <div class="rec" style="width: 23%">
                    <div class="col-md-12 " style="border-bottom: 1px solid #ddd;margin-top: 15px;padding-bottom: 15px">
                      <div class="user" >账户状态 :  <span id="state"></span></div>
                      <div class="user" >账户余额(元) : <span id="balance"></span></div>
                    </div>
                    <div class="col-md-12 " style="margin-top: 15px;padding-bottom: 15px">
                      <div class="user">最后一次充值信息</div>
                      <div class="user">充值时间 : <span id="recordtime"></span></div>
                      <div class="user" >充值金额(元) : <span id="rechargeamount"></span></div>
                    </div>
                  </div>

                  <div class="rec" style="width:15%;margin-left: 1%">
                    <div class="col-md-12 " id="channel_type" style="margin-top: 15px;padding-bottom: 15px">
                      <div class="user" style="margin-bottom: 30px">请选择支付方式</div>
                      <label style="width: 100%"><input name="channel" type="radio" value="1" />现金 </label>
                      <label style="width: 100%"><input name="channel" type="radio" value="2" />微信 </label>
                      <label style="width: 100%"><input name="channel" type="radio" value="3" />支付宝 </label>
                    </div>
                  </div>
                  <div class="rec" style="width:60%;margin-left: 1%">
                    <div class="col-md-12 " style="margin-top: 15px;padding-bottom: 15px">
                      <div class="user" style="margin-bottom: 30px">充值金额(元)</div>
                      <div class="col-md-12" style="padding: 0">
                        <input type="text" placeholder="" maxlength="60"
                               name="recharge"  class="form-control" oninput="numChange();" id="out" />
                      </div>
                      <div class="user" style="margin-top: 30px;text-align: center;line-height: 100px">您将对<span id="rechargecompany"></span>充值<span id="rechargenum" style="color: red;"> 0 </span>元</div>
                    </div>
                  </div>

                  <div class="form-actions" style="line-height: 100px">
                    <div class="row text-center"style="width: 50%;position: relative;left: 35%;top: 40px">
                      <div class="col-md-offset-3 col-md-6">
                        <button id="recharge" class="btn green" style="width: 250px">充值</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-10 re2" style="display:none; background-color: white;width: 81%;margin-left: 2.3333%;border: 1px solid #ddd;padding: 0;    position: absolute;left: 16%;top: 105px;min-height: 750px">
            <div class="col-md-12 success">充值成功!</div>
            <div class="col-md-12" style="line-height: 40px;font-size: 14px">
              <div style="float: left;font-size: 15px">充值收据</div>
              <div style="float: right;font-size: 15px">流水号 : <span class="serialnumber"></span></div>
            </div>
            <div class="col-md-12">
              <table id="print-content" border="1" width="100%"  cellpadding="0" cellspacing="0" style='border-collapse:collapse;table-layout:fixed;'>
                <!--<tr height="60" style="text-align: center;">
                        <td colspan="12" style="text-align-last: center;">充值成功</td>
                </tr>-->
                <tr height="45" style="text-align: center;font-size:14px">
                  <td colspan="2" class="on">账户名称</td>
                  <td colspan="10" class="name"></td>
                </tr>
                <tr height="45" style="text-align: center;font-size:14px">
                  <td colspan="2" class="on">联系人</td>
                  <td colspan="2" class="phone1"></td>
                  <td colspan="2" class="on">充值时间</td>
                  <td colspan="2" class="recordtime"></td>
                  <td colspan="2" class="on">收费人</td>
                  <td colspan="2" class="companyname2"></td>
                </tr>
                <tr height="45" style="text-align: center;font-size:14px">
                  <td colspan="2" class="on">付款途径</td>
                  <td colspan="2" class="channel"></td>
                  <td colspan="2" class="on">充值金额(元)</td>
                  <td colspan="2" class="rechargeamount"></td>
                  <td colspan="2" class="on">分项账户</td>
                  <td colspan="2" class="wallet"></td>
                </tr>
                <tr height="45" style="text-align: center;font-size:14px">
                  <td colspan="2" class="on">充值前余额(元)</td>
                  <td colspan="2" class="beforerecharge"></td>
                  <td colspan="2" class="on">充值后余额(元)</td>
                  <td colspan="6" class="afterrecharge"></td>
                </tr>
              </table>
            </div>
            <div class="col-md-12" style="line-height: 100px;text-align: center" >
              <div id="ad" class="btn green" style="width: 200px">完成</div>
              <a class="btn green" id="print-click" style="color: white" onclick="exportTable();">导出Excel</a>
              <button class="btn green" onclick="printout()">打印回执</button>
            </div>
          </div>
        </div>
          <!-- Page Footer-->
          <jsp:include page="footer.jsp"></jsp:include>
      </div>
    </div>
  </div>
    <!-- JavaScript files-->
  <script>
      $("#recharge-menu").addClass('active');
  </script>
  <script src="${pageContext.request.contextPath}/base/plugins/layui-v2.4.3/layui/excel.js"></script>
  <script src="${pageContext.request.contextPath}/base/plugins/layui-v2.4.3/FileSaver.js"></script>
  <script src="${pageContext.request.contextPath}/base/plugins/layui-v2.4.3/jszip.js"></script>
  <script src="${pageContext.request.contextPath}/base/plugins/layui-v2.4.3/xlsx.js"></script>
  <script src="${pageContext.request.contextPath}/js/recharge.js"></script>
  </body>
</html>